<script setup>
import { ref, reactive, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { inspectionTask } from '@/api/inspection/task-manage.ts'
import { inspectionAudio, inspectionMap } from '@/api/inspection/resource-manage'
import { inspectionRoute } from '@/api/inspection/map-setting.ts'

// 接收props
const props = defineProps({
  visible: { type: Boolean, default: false },
  status: { type: Number, default: 0 },
  formData: { type: Object, default: () => ({}) }
})
const { visible, status, formData } = toRefs(props)
const emit = defineEmits(['update:visible', 'refreshData', 'initFormData'])

// 关闭弹窗
function onCloseDialog() {
  emit('update:visible', false)
  emit('initFormData')
  ruleFormRef.value.resetFields()
}

const mapData = ref([])
const audioData = ref([])
const routeData = ref([])

watch(
  () => formData.value.mid,
  async () => {
    const {
      data: { list: routeList }
    } = await inspectionRoute.read({ mid: formData.value.mid })
    routeData.value = routeList
  }
)

watch(visible, async (val) => {
  if (val) {
    const {
      data: { list: mapList }
    } = await inspectionMap.read()
    mapData.value = mapList
    const {
      data: { list: audioList }
    } = await inspectionAudio.read()
    audioData.value = audioList
    if (status.value !== 0) {
      formData.value.tid = Number(formData.value.tid)
      if (formData.value.type === 1) {
        const {
          data: { list: routeList }
        } = await inspectionRoute.read({ mid: formData.value.mid })
        routeData.value = routeList
      }
    }
  }
})

// 表单校验规则
const ruleFormRef = ref()
const rules = reactive({
  name: { required: true, message: '该选项不能为空', trigger: 'blur' },
  type: { required: true, message: '该选项不能为空', trigger: 'blur' },
  mid: { required: true, message: '该选项不能为空', trigger: 'blur' },
  tid: { required: true, message: '该选项不能为空', trigger: 'blur' },
  time: { required: true, message: '该选项不能为空', trigger: 'blur' },
  startTime: { required: true, message: '该选项不能为空', trigger: 'blur' },
  endTime: { required: true, message: '该选项不能为空', trigger: 'blur' },
  condition: { required: true, message: '该选项不能为空', trigger: 'blur' }
})

// 激活条件
const condition = [
  { id: 0, name: '单次' },
  { id: 1, name: '每天' },
  { id: 2, name: '工作日' },
  { id: 3, name: '节假日' }
]

async function onSubmit(formEl) {
  if (!formEl) return
  // 表单校验
  await formEl.validate(async (valid) => {
    if (valid) {
      await ElMessageBox.confirm('确认继续操作吗', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
      if (status.value === 0) {
        const { message } = await inspectionTask.create(formData.value)
        ElMessage({ type: 'success', message })
      } else if (status.value === 1) {
        const { message } = await inspectionTask.update(formData.value)
        ElMessage({ type: 'success', message })
      } else if (status.value === 2) {
        delete formData.value.id
        const { message } = await inspectionTask.create(formData.value)
        ElMessage({ type: 'success', message })
      }
      onCloseDialog()
      emit('refreshData')
    }
  })
}
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="任务模板"
    width="640px"
    :close-on-click-modal="false"
    :show-close="false"
    @close="onCloseDialog()"
  >
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="formData"
      label-width="100px"
      label-suffix="："
    >
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item v-if="status === 0" label="任务类型" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">巡检任务</el-radio>
          <el-radio :label="0">广播任务</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.type === 1" label="任务地图" prop="mid">
        <el-select v-model="formData.mid" @change="formData.tid = null">
          <el-option v-for="item in mapData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.type === 1" label="任务路径" prop="tid">
        <el-select v-model="formData.tid">
          <el-option v-for="item in routeData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.type === 0" label="广播音频" prop="tid">
        <el-select v-model="formData.tid">
          <el-option v-for="item in audioData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="任务次数" prop="time">
        <el-input v-model="formData.time" />
      </el-form-item>
      <el-form-item label="任务时间" required>
        <el-form-item prop="startTime">
          <el-date-picker
            v-model="formData.startTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="!w-[240px] mr-5"
            type="datetime"
            placeholder="开始时间"
          />
        </el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker
            v-model="formData.endTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="!w-[240px]"
            type="datetime"
            placeholder="结束时间"
          />
        </el-form-item>
      </el-form-item>
      <el-form-item label="激活条件" prop="condition">
        <el-select v-model="formData.condition" class="w-full">
          <el-option v-for="item in condition" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)"> 确认 </el-button>
        <el-button @click="onCloseDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
